<template>
  <div class="import-read-dialog">
    <MyDialog :show.sync="visible" @beforeClose="beforeClose">
      <template #body>
        <div class="voucher-box" v-if="voucherList.length > 0">
          <div
            class="voucher"
            v-for="(voucher, index) in voucherList"
            :key="index"
          >
            <div class="voucher-item">
              <div class="left">
                <img
                  v-if="getIconType(voucher.name) == 'png'"
                  class="voucher-icon"
                  src="@/assets/images/file-type/png.png"
                  alt="图片"
                />
                <img
                  v-if="getIconType(voucher.name) == 'pptx'"
                  class="voucher-icon"
                  src="@/assets/images/file-type/pptx.png"
                  alt="ppt"
                />
                <img
                  v-if="getIconType(voucher.name) == 'excel'"
                  class="voucher-icon"
                  src="@/assets/images/file-type/excel.png"
                  alt="excel"
                />
                <img
                  v-if="getIconType(voucher.name) == 'zip'"
                  class="voucher-icon"
                  src="@/assets/images/file-type/zip.png"
                  alt="zip"
                />
                <img
                  v-if="getIconType(voucher.name) == 'none'"
                  class="voucher-icon"
                  src="@/assets/images/file-type/none.png"
                  alt="zip"
                />
                <img
                  v-if="getSuffix(voucher.name) == 'pdf'"
                  class="voucher-icon"
                  src="@/assets/images/file-type/pdf.png"
                  alt="pdf"
                />
                <img
                  v-if="getIconType(voucher.name) == 'txt'"
                  class="voucher-icon"
                  src="@/assets/images/file-type/txt.png"
                  alt="txt"
                />

                <div class="name">
                  {{ voucher.name }}
                </div>
              </div>
              <div class="right">
                <el-button
                  size="medium"
                  type="text"
                  @click="lookDetail(voucher)"
                >
                  查看
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <div class="empty" v-if="voucherList.length == 0">暂无凭证</div>
      </template>
      <div slot="title">
        <p>{{ title }}</p>
      </div>
      <div slot="footer"></div>
    </MyDialog>
  </div>
</template>

<script>
export default {
  name: "VoucherShow",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    isShowVoucher: {
      type: Boolean,
      default: false,
    },
    voucherList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  computed: {
    visible: {
      get() {
        return this.isShowVoucher;
      },
      set(val) {
        this.$emit("update:isShowVoucher", val); // visible 改变的时候通知父组件
      },
    },
  },
  watch: {},
  methods: {
    // 获得文件类型
    getSuffix(name) {
      const nameF = name.split(".");
      if (nameF.length === 1) {
        nameF[1] = null;
      }
      return nameF[nameF.length - 1];
    },
    // 根据后缀判断显示文件小标
    getIconType(name) {
      const pngType = [
        "png",
        "jpg",
        "jpeg",
        "bmp",
        "gif",
        "webp",
        "psd",
        "svg",
        "tiff",
      ];
      if (pngType.indexOf(this.getSuffix(name)) > -1) {
        return "png";
      }
      if (["ppt", "pptx"].indexOf(this.getSuffix(name)) > -1) {
        return "pptx";
      }
      if (["xlsx", "xls", "csv"].indexOf(this.getSuffix(name)) > -1) {
        return "excel";
      }
      if (["zip", "rar"].indexOf(this.getSuffix(name)) > -1) {
        return "zip";
      }
      if (["txt", "doc", "docx"].indexOf(this.getSuffix(name)) > -1) {
        return "txt";
      }

      if (
        [
          "zip",
          "rar",
          "ppt",
          "pptx",
          "xlsx",
          "xls",
          "csv",
          "pdf",
          "txt",
          "doc",
          "docx",
        ]
          .concat(pngType)
          .indexOf(this.getSuffix(name)) == -1
      ) {
        return "none";
      }
    },
    // 关闭 右侧X
    beforeClose() {
      // this.$emit("closeDialog");
      // this.visible = false
    },
    // 查看
    lookDetail(voucher) {
      const a = document.createElement("a");
      a.setAttribute("download", voucher.name);
      a.style.display = "none";
      a.href = voucher.path;
      a.target = "_blank";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
  },
};
</script>
<style lang="scss">
.empty {
  text-align: center;
}
.voucher-box {
  height: 300px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

  .voucher {
    .voucher-item {
      padding: 15px 15px;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .voucher-icon {
          width: 42px;
          margin-right: 10px;
        }
        .name {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
